<template>
	<view class="flex-column h100 w100">
		<!-- #ifndef MP-TOUTIAO -->
		<uni-nav-bar :fixed="true" height="80rpx" :statusBar='!isWin' left-icon='left' @clickLeft="gobacks" title="位置"></uni-nav-bar>
		<!-- #endif -->
		<view class="flex center">
			<view style="display: flex;" @click="choiseCity">{{city}} <u-icon style="transform: translateY(-50%);" name="arrow-down" size="14"></u-icon></view>
			<view style="height: 80rpx;flex:1;padding: 5rpx 0;position: sticky;">
				<u-search  placeholder="请输入位置" :showAction="true" @custom="search" actionText="搜索" v-model="address" :clearabled="true"></u-search>
			</view>
		</view>
		<ul v-show="isShow" style="margin-top: -6rpx;padding: 20rpx 20rpx;background-color: #fff;overflow-y: scroll;" class="flex-column row-gap-10 fixed top">
			<li v-for="(item,index) in addressList" :key="item.id" @click="confirm(item)">
				<view>{{item.title}}</view>
				<view class='small-font'>{{item.address}}</view>
			</li>
		</ul>
		<map style="flex:1;height: 100%;width: 100%;" :markers="markers" :longitude="longitude" :latitude="latitude"></map>
		<selector-component
		  :show="selectorVisible"
		  :key="key"
		  :referer="referer"
		  bindselect="onSelectCity"
		></selector-component>
	</view>
</template>

<script>
	//  #ifndef MP-TOUTIAO
	const citySelector = requirePlugin('citySelector');
	// #endif
	export default{
		name:"location",
		data(){
			return {
				key:'3OIBZ-HWF6U-XELVJ-BSDLS-5BAGH-PQFVG',
				referer:'roseannepark',
				address:'',
				top:'',
				addressList:[],
				isShow:false,
				markers:[],
				longitude:116.397643,
				latitude:39.909088,
				curryItem:'',
				city:'北京',
				selectorVisible:false
			}
		},
		onLoad(){
			let info = wx.getSystemInfoSync();
			console.log(info);
		},
		onShow(){
			//  #ifndef MP-TOUTIAO
			const selectedCity = citySelector.getCity();
			if(selectedCity){
				console.log("selectedCity",selectedCity);
				this.city = selectedCity.name;
				this.longitude = selectedCity.location.longitude;
				this.latitude = selectedCity.location.latitude;
			}
			// #endif
		},
		onUnload () {
		    // 页面卸载时清空插件数据，防止再次进入页面，getCity返回的是上次的结果
		    //  #ifndef MP-TOUTIAO
			citySelector.clearCity();
			// #endif
		},
		methods:{
			gobacks(){
				let channel = this.getOpenerEventChannel();
				channel.emit('acceptAddress',{
					data: this.curryItem
				})
				wx.navigateBack();
			},
			onSelectCity(e){
				console.log(e)
			},
			choiseCity(){
				wx.navigateTo({
				  url: `plugin://citySelector/index?key=${this.key}&referer=${this.referer}`,
				})
				// wx.choosePoi({
				// 	success:(res)=>{
				// 		console.log(res)
				// 	},
				// 	fail:(err)=>{
				// 		console.log(err)
				// 	}
				// })
			},
			search(){
				console.log(this.address);
				wx.request({
					url: `https://apis.map.qq.com/ws/place/v1/search?page_index=1&page_size=20&boundary=region(${this.city}市,0)&keyword=${this.address}&key=3OIBZ-HWF6U-XELVJ-BSDLS-5BAGH-PQFVG`,
					success:(res)=>{
						this.addressList.splice(0);
						this.addressList.push(...res.data.data);
						this.isShow = true;
					}
				})
			},
			confirm(item){
				console.log('item',item)
				this.longitude = item.location.lng;
				this.latitude = item.location.lat;
				this.markers.splice(0);
				this.markers.push({
					id:Number(item.id),
					latitude: item.location.lat,
					longitude: item.location.lng,
					callout: {
					  // 点击marker展示title
					  content: item.address
					}
				});
				this.isShow = false;
				this.curryItem = item;
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.large-font{
		font-size: 1.5rem;
		font-weight: 700;
	}
	
	.middle-font{
		font-size: 1.1rem;
	}
	
	.small-font{
		font-size: 0.7rem;
		font-weight: 200;
	}
	
	.top{
		top: calc(160rpx + var(--status-bar-height));
	}
	
</style>